<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>js_dom练习03</title>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function checkMe(){
				//默认返回值
				var isOK = true;
				//默认提示信息
				var strMsg = "";
				//验证用户名不为空
				//获取用户名对象
				var $name = $("#txtName");
				if($name.val() ==""){
					
					$("#waName").html("请输入用户名");
					$("#waName").css("color","red");
					isOK = false;
				}else{
					$("#waName").html("");
				}
				//验证密码
				//获取密码对象
				var $pw = $("#txtPsw");
				if($pw.val() == ""){
					$("#waPw").html("请输入密码");
					$("#waPw").css("color","red");
					isOK=false;
				}else{
					$("#waPw").html("");
				}
				//验证邮箱不为空
				//获取邮箱对象
				var $mail = $("#txtMail");
				var regMail = /^\w+@\w+.[A-Aa-z]{2,3}(.[A-Za-z]{2,3})?$/;
				if( !($mail.val() =="" && regMail.test($mail.val()))){
					
					$("#waMail").html("请输入邮箱");
					$("#waMail").css("color","red");
					isOK=false;
				}else{
					$("#waMail").html("");
				}
				//验证性别
				//获取性别对象
				var $sex = $("input[name='txtSex']:checked")
				
				if ($sex.length ==0) {
				
					$("#waSex").html("请输入性别");
					$("#waSex").css("color","red");
					isOK=false;
				}else{
					$("#waSex").html("");
				}
				//年份验证
				//获取年份对象
				var $year = $("#birthdayYear");
				if ($year.val() =="") {
					
					$("#waBd").html("请输入出生年份");
					$("#waBd").css("color","red");
					isOK=false;
				}else{
					$("#waBd").html("");
				}
				//月份验证
				var $month = $("#birthdayMonth");
				if ($month.val() =="") {
				
					$("#waBd").html("请输入出生月份");
					$("#waBd").css("color","red");
					isOK=false;
				}else{
					$("#waBd").html("");
				}
				//兴趣验证
				//获取兴趣对象
				var $hobby = $("input[name='txtHobby']:checked");
				
				if ($hobby.length ==0) {
					
					$("#waHobby").html("请选择兴趣爱好");
					$("#waHobby").css("color","red");
					isOK=false;
				}else{
					$("#waHobby").html("");
				}
				
				var myform = document.getElementById("myform");
				if (isOK) {
					myform.submit();
				}
//				return isOK;
			}
		</script>
	</head>

	<body>
		<p>使用form表单向服务器发送数据</p>
		<form action="#" method="post" id="myform">
			<table width="800px" align="center" cellspacing="0" border="1px">
				<tr>
					<td>用户名:</td>
					<td><input type="text" id="txtName" name="txtName" /></td>
					<td><font id="waName"></font></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" id="txtPsw" name="txtPsw" /></td>
					<td><font id="waPw"></font></td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td><input type="text" id="txtMail" name="txtMail" /></td>
					<td><font id="waMail"></font></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<!---单选框要求：同组的选项的name属性要一样，才能实现互斥单选-->
						<input type="radio" id="txtSex1" name="txtSex" value="女" />女
						<input type="radio" id="txtSex2" name="txtSex" value="男" />男
						<input type="radio" id="txtSex3" name="txtSex" value="未知" />未知
					</td>
					<td><font id="waSex"></font></td>
				</tr>
				<tr>
					<td>出生年月:</td>
					<td>
						<select id="birthdayYear" name="birthdayYear">
							<option></option>
							<option value="1990">1990</option>
							<option value="1991">1991</option>
							<option value="1992">1992</option>
							<option value="1993">1993</option>
						</select>年
						<select id="birthdayMonth" name="birthdayMonth">
							<option></option>
							<option value="1">01</option>
							<option value="2">02</option>
							<option value="3">03</option>
							<option value="4">04</option>
						</select>月
					</td>
					<td><font id="waBd"></font></td>
				</tr>
				<tr>
					<td>兴趣爱好:</td>
					<td>
						<!---多选框要求：同组的选项的name属性要一样，才能正确的向服务器发送表单数据-->
						<input type="checkbox" id="txtHobby1" name="txtHobby" value="coding" />写代码
						<input type="checkbox" id="txtHobby2" name="txtHobby" value="gaming" />打游戏
						<input type="checkbox" id="txtHobby2" name="txtHobby" value="lvyou" />旅游
					</td>
					<td><font id="waHobby"></font></td>
				</tr>
				<tr>
					<td>头像:</td>
					<td><input type="file" id="txtImg" name="txtImg" /></td>
					<td>请选择头像</td>
				</tr>
				<tr>
					<td>自我介绍:</td>
					<td>
						<textarea rows="8" cols="60" id="txtIntroduce" name="txtIntroduce">
						</textarea>
					</td>
					<td>请输入自我介绍</td>
				</tr>
				<tr>
					<!--使用submit类型的按钮点击会自动提交表单--->
					<td colspan="3" align="center"> <input type="button" value="注册" onclick="checkMe();" /></td>

				</tr>
			</table>
		</form>
	</body>

</html>